<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统通知</span>
      </div>
      <ul class="text item">
        <li>若显示混乱，尝试调整网页大小比例</li>
        <li>
          建议在电脑端使用Chrome浏览器或Edge浏览器进行浏览，其他浏览器可能会因为兼容问题导致网页无法使用
        </li>
        <li>计电院综合测评材料管理系统已经上线</li>
      </ul>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>开发团队</span>
      </div>
      <ul class="team">
        <li>
          <span class="one">版权所有</span
          ><span>南京师范大学计算机与电子信息学院/人工智能学院</span
          ><span class="link" @click="go">访问官网</span>
        </li>
        <li>
          <span class="one">开发者</span
          ><span
            >后端：戎寒冰(565044347@qq.com)、前端：施涛(2540258512@qq.com)</span
          >
        </li>
      </ul>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统信息</span>
      </div>
      <ul class="team">
        <li><span class="one">版本</span><span>V1.0</span></li>
        <li><span class="one">操作系统</span><span>Linux</span></li>
        <li><span class="one">上传附件大小限制</span><span>5M</span></li>
        <li>
          <span class="one">上传附件支持格式</span
          ><span>png, jpg/jpeg(区分大小写)</span>
        </li>
      </ul>
    </el-card>
    <!-- 图片懒加载 -->
    <div class="block">
      <el-carousel height="350px">
        <el-carousel-item v-for="item in imgSrc" :key="item">
          <img v-lazy="item" ref="img" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: [
        "http://www.njnu.edu.cn/__local/0/A9/97/ED9ED5863327C02F0389F87AFDB_93EB6323_3E312.jpg",
        "http://www.njnu.edu.cn/__local/1/A5/C7/71668EEB8D0609D7AC8D492ACB8_254763B0_407A4.jpg",
        "http://www.njnu.edu.cn/__local/D/EA/C9/87B8799489F9C3BFBCA4F0ADEB5_11AE8B57_300C4.jpg",
        "http://www.njnu.edu.cn/__local/F/B6/0E/7EAD67B0A4BA7E61AEA08D7BCDE_B1794723_2C8AC.jpg",
        "http://www.njnu.edu.cn/__local/7/8D/3A/5F2AC496476F31FC838AFBDC922_502AE3AB_4D917.jpg",
      ],
    };
  },
  methods: {
    go() {
      window.open("http://ceai.njnu.edu.cn/");
    },
    //图片懒加载原生JS
    // callback(items) {
    //   items.forEach((item) => {
    //     if (item.isIntersecting) {
    //       const image = item.target;
    //       const data_src = image.getAttribute("data-src");
    //       image.setAttribute("src", data_src);
    //       observer.unobserve(image);
    //       console.log("scroll触发");
    //     }
    //   });
    // },
    // look() {
    //   const observer = new IntersectionObserver(callback);
    //   this.$refs.img.forEach((item) => {
    //     observer.observer(item);
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin-bottom: 2rem;
  font-size: 1rem;
  color: #1aa093;
}
.el-card {
  margin-bottom: 2rem;
}
.clearfix {
  span {
    font-size: 2rem;
  }
}
.team {
  .one {
    display: inline-block;
    width: 20rem;
  }
  .link {
    margin-left: 1rem;
    color: black;
    cursor: pointer;
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.block {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  img {
    height: 350px;
    width: 100%;
  }
  .el-carousel {
    width: 100%;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>